<template>
  <div class="pageBox">
    <head-component
      :title="!form.id ? '凭证上传' : '凭证详情'"
    ></head-component>
    <div class="content">
      <div class="main">
        <div class="mainLine"></div>
        <div class="iptBox">
          <p>交易所账号</p>
          <input
            type="text"
            placeholder="请输入您的交易所账号"
            v-model="form.exchangeAccount"
          />
        </div>
        <div class="iptBox">
          <p>姓名</p>
          <input type="text" placeholder="请输入姓名" v-model="form.name" />
        </div>
        <div class="iptBox">
          <p>电话</p>
          <input type="text" placeholder="请输入您的电话" v-model="form.tel" />
        </div>

        <div class="iptBox">
          <p>持票数量</p>
          <input
            type="text"
            placeholder="请输入持票数量"
            v-model="form.amount1"
          />
        </div>
        <div class="iptBox">
          <p>持仓货款</p>
          <input
            type="text"
            placeholder="请输入持仓货款"
            v-model="form.amount"
          />
        </div>
        <div class="iptBox" v-if="info.place_id === 0">
          <p>节点人</p>
          <input
            type="text"
            placeholder="请输入节点人的姓名"
            v-model="form.place_id"
          />
        </div>
        <div class="iptBox" v-if="info.place_id === 0">
          <p>节点人电话</p>
          <input
            type="text"
            placeholder="请输入节点人的电话"
            v-model="form.place_tel"
          />
        </div>

        <div class="iptBox">
          <p>选择持有时间</p>
          <van-radio-group
            v-model="form.cid"
            direction="horizontal"
            v-if="!form.id"
          >
            <van-radio
              :name="item.id"
              checked-color="#ee0a24"
              v-for="item in radioList"
              :key="item.id"
              >{{ item.title }}</van-radio
            >
          </van-radio-group>
          <input type="text" :value="`持票${form.days}天`" v-else />
        </div>

        <div class="uploadBox">
          <div class="uploadTitle">上传凭证</div>
          <van-uploader
            :after-read="afterRead"
            v-model="fileList1"
            multiple
            :disabled="disabled"
            v-if="!form.id"
            @delete="delImg"
          >
            <img class="uploadImg1" :src="uploadImg" alt="" />
          </van-uploader>
          <template v-if="form.images1.length && form.id">
            <img
              v-for="(item, index) in form.images1"
              :key="index"
              :src="item"
              class="uploadImg1"
            />
          </template>
        </div>

        <button
          :disabled="disabled"
          class="exchangeBtn"
          v-if="!form.id"
          @click="onSubmit"
        >
          立即上传
        </button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import { Toast } from "vant";
import { post, upload } from "../../untils/request";
import router from "../../router";
import { useRoute } from "vue-router";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const route = useRoute();

    const form = reactive({
      id: typeof route.query.id === "string" ? route.query.id : "",
      exchangeAccount: "", // 交易所账号
      name: "", // 姓名
      tel: "", // 电话
      amount1: "", // 持票数量
      amount: "", // 持仓货款
      place_id: "", // 节点人
      place_tel: "", // 节点人电话
      images1: [],
      days: "7", // 持票天数
      cid: "",
    });
    const fileList1 = ref([]);
    const uploadImg1 = ref([]);
    const uploadImg = require("@/image/my/uploadBg.png");

    const disabled = ref(false);

    const info = ref({});

    const radioList = ref([]);

    const afterRead = (file) => {
      disabled.value = true;
      let formData = new FormData();
      formData.append("file", file.file);
      upload("/upload", formData)
        .then((res) => {
          console.log("上传", res);
          form.images1.push(res.data.file);
          uploadImg1.value.push(res.data.file);
          console.log(form.images1, uploadImg1.value, "aaa");
          disabled.value = false;
        })
        .catch(() => {
          uploadImg1.value = [];
          form.images1 = [];
          disabled.value = false;
        });
    };
    function delImg(file, index) {
      // console.log("删除",file,index);
      for (var i in uploadImg1.value) {
        if (i == index.index) {
          uploadImg1.value.splice(i, 1);
          break;
        }
      }
      for (var j in form.images1) {
        if (j == index.index) {
          form.images1.splice(j, 1);
          break;
        }
      }
      console.log(form.images1, uploadImg1.value, "bbb");
    }

    // 表单校验
    function checkForm() {
      if (!form.exchangeAccount) {
        Toast("请输入您的交易所账号");
        return false;
      } else if (!form.name) {
        Toast("请输入姓名");
        return false;
      } else if (!form.tel) {
        Toast("请输入电话");
        return false;
      } else if (!form.amount1) {
        Toast("请输入持票数量");
        return false;
      } else if (!form.amount) {
        Toast("请输入持仓货款");
        return false;
      } else if (!form.place_id && info.value.place_id === 0) {
        Toast("请输入节点人姓名");
        return false;
      } else if (!form.place_tel && info.value.place_id === 0) {
        Toast("请输入节点人电话");
        return false;
      } else if (!fileList1.value.length) {
        Toast("请上传持票凭证");
        return false;
      } else {
        return true;
      }
    }

    // 提交表单
    function onSubmit() {
      console.log(form, "form");
      if (checkForm()) {
        post("/portal", {
          module: "Finance",
          interface: "9000",
          data: form,
        }).then(() => {
          Toast("提交成功");
          setTimeout(() => {
            router.go(-1);
          }, 1500);
        });
      }
    }

    if (form.id) {
      post("/portal", {
        module: "Finance",
        interface: "9002",
        data: { id: form.id },
      }).then((res) => {
        console.log("详情", res);
        for (const k in form) {
          if (res.data[k]) {
            form[k] = res.data[k];
          }
        }
        form.place_id = res.data.placeId;
        form.place_tel = res.data.placeTel;
      });
    }

    function getInfo() {
      post("/portal", {
        module: "User",
        interface: "1000",
      }).then((res) => {
        info.value = res.data;
        console.log(info.value.place_id);
      });
    }
    getInfo();

    function getParam() {
      if (form.id) {
        return;
      }
      post("/portal", {
        module: "Finance",
        interface: "9003",
      }).then((res) => {
        radioList.value = res.data;
        form.cid = res.data[0].id;
      });
    }
    getParam();

    return {
      form,
      fileList1,
      uploadImg1,
      uploadImg,
      disabled,
      info,
      radioList,
      afterRead,
      delImg,
      onSubmit,
      getInfo,
      getParam,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  padding-bottom: 101px;

  .content {
    padding: 40px 30px 0;
    .main {
      padding: 70px 40px 80px;
      position: relative;
      background: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(223, 207, 207, 0.5);
      border-radius: 20px;
      .mainLine {
        width: 100%;
        height: 9px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 20px 20px 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }

      .iptBox {
        margin-bottom: 82px;
        p {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 40px;
        }
        input {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
        }
        input::-webkit-input-placeholder {
          color: #cccccc;
          font-size: 28px;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #cccccc;
          font-size: 28px;
        }

        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #cccccc;
          font-size: 28px;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #cccccc;
          font-size: 28px;
        }
      }
      .uploadBox {
        .uploadTitle {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 30px;
        }
        :deep(.van-uploader__upload) {
          width: 200px;
          height: 200px;
          margin: 0;
        }
        :deep(.van-uploader__upload-icon) {
          display: none;
        }
        :deep(.van-uploader__preview) {
          width: 200px;
          height: 200px;
          margin: 0;
        }
        :deep(.van-uploader__preview-image) {
          width: 200px;
          height: 200px;
        }
        :deep(.van-image__img) {
          width: 200px;
          height: 200px;
        }
        .uploadImg1 {
          width: 200px;
          height: 200px;
        }
      }

      .exchangeBtn {
        font-size: 32px;
        font-weight: 500;
        color: #ffffff;
        width: 92%;
        height: 88px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
        border-radius: 16px;
        margin: 80px auto 0;
        display: block;
        border: none;
      }
    }
  }
}
</style>